// vue.config.js
const px2rem = require('postcss-plugin-px2rem')
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录
  outputDir: 'dist',
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: 'assets',
  // false：关闭每次保存都进行检测
  // true：开启每次保存都进行检测，效果与warning一样
  // warning：开启每次保存都进行检测，lint 错误将显示到控制台命令行，而且编译并不会失败。
  // error：开启每次保存都进行检测，lint 错误将显示到浏览器页面上，且编译失败。
  // default：同’error’
  // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
  lintOnSave: 'warning',
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          px2rem({
            // postcss-plugin-px2rem 默认配置
            rootValue: 37.5, // 换算基数， 默认100，1rem=37.5px
            unitPrecision: 5, // 允许REM单位增长到的十进制数字。
            propWhiteList: [], // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            propBlackList: [], // 黑名单
            exclude: false, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            selectorBlackList: [], // 要忽略并保留为px的选择器 如['#app']
            ignoreIdentifier: false, // （boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
            minPixelValue: 0 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
          })
        ]
      }
    }
  },
  devServer: {
    /* 自动打开浏览器 */
    open: true
  },
  // 生产环境关闭source-map
  productionSourceMap: !isProduction,
  chainWebpack: (config) => {
    // config.externals = {
    //   vue: 'Vue',
    //   axios: 'axios',
    //   vant: 'vant',
    //   'vue-router': 'VueRouter'
    // }
    // 开发环境
    config.when(
      !isProduction,
      (config) => config.devtool('cheap-source-map') // 转换过的源码-快
      // config => config.devtool('source-map') // 源码-慢
    )
  }
}
